<template>
  <div id="login">
    <div class="login-box">
      <h1>登陆系统</h1>
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm"
        size="small"
        :rules="rules"
      >
        <!-- 输入账号 -->
        <el-form-item prop="account">
          <el-input
            type="text"
            v-model="ruleForm.account"
            autocomplete="off"
            prefix-icon="iconfont icon-account"
          ></el-input>
        </el-form-item>
        <!-- 输入密码 -->
        <el-form-item prop="password">
          <el-input
            :type="visiable ? 'text' : 'password'"
            v-model="ruleForm.password"
            autocomplete="off"
            prefix-icon="iconfont icon-password"
          >
            <!-- 图标插槽 -->
            <i
              slot="suffix"
              class="iconfont"
              :class="visiable ? 'icon-eye-open' : 'icon-eye-close'"
              @click="visiable = !visiable"
            ></i>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" class="login-btn" @click="submitLogin"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
//引入接口层
import { Login } from "@/api/user.js";

// // 简单使用
// Login({
//   account: "yy666",
//   password: "a123456",
// })
//   .then((res) => {
//     console.log(res);
//   })
//   .catch((err) => {
//     console.log(err);
//   });

export default {
  data() {
    return {
      ruleForm: {
        account: "",
        password: "",
      },
      rules: {
        account: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 12,
            message: "用户名长度在2-12位字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入您的密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message:
              "密码为6-12位字符，以字母开头,长度在6~18之间,包含字母、数字和下划线",
            trigger: "blur",
          },
        ],
      },
      //控制眼睛属性
      visiable: false,
    };
  },
  methods: {
    submitLogin() {
      this.$refs["ruleForm"].validate((valid) => {
        //valid 表示表单所有字段是否通过验证,只要有一个没有通过,返回false,否则返回true
        if (valid) {
          ///可以发ajax进行登陆操作
          //  console.log('ruleForm');
          Login(this.ruleForm).then((res) => {
            console.log(res);
            let { code, msg } = res.data;
            if (code == 0) {
              // //提示
              // this.$message.success(msg);

              //存数据
              localStorage.setItem("tk", res.data.token);
              localStorage.setItem("role", res.data.role);
              calcRoutes();

              // 跳转
              this.$router.push("/home");
            } else {
              // this.$message.error(msg);
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
#login {
  width: 100%;
  height: 100%;
  // background-color: #2a3d4b;
  background: url(../../assets/imgs/login.jpg) no-repeat center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 500px;
    height: 400px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    /deep/.el-input__inner {
      // background-color: transparent;
      color: #000;
    }
    /deep/.el-form-item__error {
      color: #000;
    }
    .login-btn {
      width: 100%;
    }
  }
}
</style>